<template>
    <div>
        <h1>待办事务</h1>
        <p v-if="todos.length === 0">暂无待办事务</p>
        <ul v-else>
            <li v-for="(todo, index) in todos" :key="index">
                <span v-bind:class="{btn: !isshow,btn_first:isshow}" @click="isshow=!isshow">{{ todos.text }}</span>
                <button @click="removeTodo(index)">删除</button>
            </li>
        </ul>

        <input v-model="newTodo" :placeholder="inputPlaceholder"/>
        <button @click="addTodo">添加</button>

        <p>当前待办事数：{{ todos.length }}</p>
    </div>
</template>

<script setup>
import {ref,reactive, compile} from 'vue'
let isshow = ref(true);
const todos=reactive([])

const newTodo=ref('')

const inputPlaceholder=ref("请输入待办事务")

const removeTodo =(index) =>{
    todos.splice(index, 1)
}

const addTodo= (index) =>{
    if(newTodo.value.trim() !== ''){
        todos.push({text: newTodo.value, completed: false})
        newTodo.value=''
    }
}
</script>

<style>
    ul{
        list-style: none;
    }
    .btn{
        color: red;
    }
    .btn_first{
        color: green;
    }
</style>